<template>
  <j-modal
    switchFullscreen
    :title="title"
    :width="500"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button v-if="!disableSubmit" type="primary" :loading="confirmLoading" @click="handleOk">确认</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="职位编号">
          <a-input placeholder="请输入职位编号" :disabled="model.id"  v-decorator="['positionCode', validatorRules.positionCode]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="职位名称">
          <a-input placeholder="请输入职位名称" :disabled="disableSubmit" v-decorator="['positionName', validatorRules.positionName]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="职级"
        >
          <cn-dict-select-tag
            placeholder="请选择职级"
            :triggerChange="true"
            :disabled="disableSubmit"
            dictCode="position_level"
            v-decorator="['positionLevel', validatorRules.positionLevel]"
            :options="{
              value:'dictDataCode',
              label:'dictDataDesc'
            }"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="组织"
        >
          <a-tree-select
            style="width:100%"
            :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
            :treeData="treeData"
            v-decorator="['departCode', validatorRules.orgCode]"
            placeholder="请选择组织"
            show-search
            tree-default-expand-all
            tree-node-filter-prop="title"
            :disabled="disableSubmit"
            @change="handleDepartCode"
            :replaceFields="{children:'children', title:'orgName', key:'orgCode', value: 'orgCode' }">
          </a-tree-select>
        </a-form-item>
        <a-form-item label="上级职位" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <cn-select-position placeholder="请选择上级职位"
                              :disabled="disableSubmit"
                             v-decorator="['parentCode', {}]" :checkTip="checkTip"     :checkVal="getOrgCode" :multiple="false"/>
        </a-form-item>

      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
  import {pick} from 'lodash'
  import { httpAction } from '@/api/manage'
  import { duplicateCheck,queryDepartTreeList} from '@/api/api'
  import CnDictSelectTag from '@/components/dict/CnDictSelectTag'
  import CnSelectPosition from '@/components/cn-select-popup/CnSelectPosition'
  let validatorCodeTimer = null

  export default {
    name: 'SysPositionModal',
    components: { CnDictSelectTag,CnSelectPosition },
    data() {
      return {
        disableSubmit: false,
        treeData:[],
        title: '操作',
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 },
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validateStatus:false,
        validatorRules: {
          positionCode: {
            rules: [
              { required: true, message: '请输入职位编号' },
            ]
          },
          positionName: { rules: [{ required: true, message: '请输入职位名称' }] },
          orgCode: { rules: [{ required: true, message: '请选择组织' }] },
          positionLevel: { rules: [{ required: true, message: '请选择职级' }] },
          isLeader: { rules: [{ required: true, message: '是否为负责人' }] },
        },
        url: {
          add:  window._CONFIG['domianURL'] + '/cnPositionController/saveOrUpdateEntity',
          edit:  window._CONFIG['domianURL'] + '/cnPositionController/saveOrUpdateEntity',
        },
        checkTip:{
          orgCode:'请先选择组织'
        },
      }
    },
    created() {
    },
    methods: {
      handleDepartCode(value, name) {
        // console.log(name)
        // this.model.departCode = ''
        this.model.departName = name.join()
      },
      getOrgCode(){
        return {'orgCode': this.form.getFieldValue('departCode')}
      },
      add() {
        this.edit({})
      },
      edit(record) {
        this.form.resetFields()
        console.log(record)
        this.model = Object.assign({}, record)
        this.visible = true
        this.loadTree()
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,Object.keys(this.model)))
        })
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk() {
        const that = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'post'
            }
            let formData = Object.assign(this.model, values)
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
                that.close()
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
            })
          }
        })
      },
      handleCancel() {
        this.close()
      },
      loadTree(){
        var that = this;
        queryDepartTreeList().then((res)=>{
          if(res.success){
            that.treeData = [];
            let treeList = res.result
            for(let a=0;a<treeList.length;a++){
              let temp = treeList[a];
              temp.isLeaf = temp.leaf;
              that.treeData.push(temp);
            }
          }
        });
      },
    }
  }
</script>

<style lang="less" scoped>

</style>
